<template>
  <div class="c-bg-white c-ph24 c-pt30 theme-market">
    <div :class="index == 0 ? '' : 'c-mt30'" @click="goDetail(item.pcId)" v-for="(item, index) in collocationList" :key="index" class="c-hh140 c-flex-row c-aligni-start">
      <div class="c-ww210 c-hh140 c-br16 c-text-hidden c-p">
        <CoverImg coverSizeClass="c-w100 c-h c-text-hidden c-br16" imgClass="c-br16" :coverUrl="$addXossFilter(item.cover, require('@/assets/defult270.png'))" />
        <div class="c-fs16 c-fc-white c-ph4 c-hh24 c-br4 c-flex-row c-flex-center c-bg-black-50 c-pa c-p-b10 c-p-r10">{{item.comboType == 1 ? '自选套餐' : '固定套餐'}}</div>
      </div>
      <div class="c-flex-column c-justify-sb c-w0 c-flex-grow1 c-ml20 c-p c-hh140">
        <div class="c-fs24 c-fc-xblack c-fw600 c-text-ellipsis1">{{item.name}}</div>
        <div class="c-fs20 c-fc-sblack">
          <cj-clocker :time="timeFn(index)" @on-finish="finishFn(index)">
            <template v-slot="{ timeInfo }">
              距{{item.pcStatus == 2 ? '结束' : '开始'}}：<span class="c-fc-xblack c-fw-b">{{timeInfo.D}}</span>天
              <span class="c-ml4">
                <span class="c-fs20 c-fc-xblack c-ww32 c-hh24 c-br4 c-inlineblack time-bg c-textAlign-c c-fw-b">{{timeInfo.H}}</span>
                <span class="c-ph2">:</span>
                <span class="c-fs20 c-fc-xblack c-ww32 c-hh24 c-br4 c-inlineblack time-bg c-textAlign-c c-fw-b">{{timeInfo.M}}</span>
                <span class="c-ph2">:</span>
                <span class="c-fs20 c-fc-xblack c-ww32 c-hh24 c-br4 c-inlineblack time-bg c-textAlign-c c-fw-b">{{timeInfo.S}}</span>
              </span>
            </template>
          </cj-clocker>
        </div>
        <div class="c-fs26 c-fc-xmlred c-fw600">
          <span class="c-fs20" v-if="(item.comboType == 2 && item.specType == 2 ? item.minPrice : item.price) > 0">{{'￥' | iosPriceFilter}}</span>
          <span class="c-fs26">{{(item.comboType == 2 && item.specType == 2 ? item.minPrice : item.price) | moneyStr}}</span>
          <span v-if="item.comboType == 2 && item.specType == 2" class="c-fs20">起</span>
        </div>
        <div class="c-flex-row" v-if="Number(item.collocationPrice - item.price) > 0 && !$isWxAppIos()">
          <div class="c-inlineblack c-vcAlign-middle c-text-ellipsis1 c-fc-xmlred c-p c-text-hidden maxw240 c-br4 bd1-xmlred c-boxsizing-c c-pv2 c-lh c-pl32 c-pr5">
            <span class="iconfont c-fs28 c-pa p-l-2 c-p-t0">&#xe758;</span>
            <div class="c-fs18 c-text-ellipsis1">{{item.comboType == 1 ? '最多可省' : item.specType == 2 ? '最多可省' : '立省'}}<span>{{'￥' | iosPriceFilter}}</span>{{Number(item.collocationPrice - item.price).toFixed(2) | moneyStr}}</div>
          </div>
        </div>
        <div :class="item.pcStatus == 2 ? 'theme-bg-gradient' : 'c-bg-ccc'" class="c-fs22 c-fc-white c-ww120 c-hh52 c-flex-row c-flex-center c-br30 c-pa c-p-r0 c-p-b0 c-fw-b">{{item.pcStatus == 2 ? '立即抢' : item.pcStatus == 1 ? '未开始' : '已结束'}}</div>
      </div>
    </div>
    <loading-status-tem :showLoading="isLoading" :noMoreData="is_page == false && (collocationList && collocationList.length > 0)" :noData="collocationList.length == 0" :noDataText="'暂无结果'"></loading-status-tem>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import CoverImg from '@/components/templates/common/coverImg.vue';
let limit = 10;

export default {
  name: 'CollocationBuyList',
  components: { loadingStatusTem, CoverImg },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      collocationList: [],
      page: 1,
      is_page: false,
      isLoading: false,
      prodId: 0,
      prodType: 0
    }
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    goDetail(mId) {
      this.$routerGo(this, "push", {
        path: "/homePage/collocationBuy/collocationDetail",
        query: {mId: mId}
      });
    },
    timeFn: function (index) {
      let stime = this.collocationList[index].startTime ? utilJs.getTimeByDate(this.collocationList[index].startTime) : 0;
      let etime = this.collocationList[index].endTime ? utilJs.getTimeByDate(this.collocationList[index].endTime) : 0;
      let nowTime = (new Date()).getTime();
      //.status 1未开始,2进行中,-1已结束
      let time = '';
      if (stime > nowTime) {
        this.collocationList[index].pcStatus = 1;
        time = stime;
      } else if (etime > nowTime) {
        this.collocationList[index].pcStatus = 2;
        time = etime;
      } else {
        this.collocationList[index].pcStatus = 3;
      }
      return time;
    },
    finishFn: function (index) {
      if (this.collocationList[index].pcStatus == 1) {
        this.collocationList[index].pcStatus = 2;
      } else {
        this.collocationList[index].pcStatus = 3;
      }
    },
    getList() {
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      let getUrl = '';
      if (this.prodId && this.prodType) {
        getUrl = `${global.apiurl}prodsCollocation/getProdRelateCollocation?prodType=${this.prodType}&prodId=${this.prodId}&page=${this.page}&limit=${limit}`
      } else {
        getUrl = `${global.apiurl}prodsCollocation/getProdCollocationList?page=${this.page}&limit=${limit}`
      }
      utilJs.getMethod(getUrl,
        res => {
          if (this.page == 1) {
            this.collocationList = res.data ? res.data : [];
          } else {
            this.collocationList = this.collocationList.concat(res.data);
          }
          this.is_page = this.page < res.last_page ? true : false;
          this.page = this.page < res.last_page ? (this.page + 1) : this.page;
          this.isLoading = false;
        },
        failRes => {
          this.isLoading = false;
        }
      );
    },
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getList();
        }
      });
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      let shareDesc = window.localStorage.getItem("shareDesc") || "点击查看详情";
      utilJs.wechatConfig(shareUrl, "搭配购", "", shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      let shareDesc = window.localStorage.getItem("shareDesc") || "点击查看详情";
      utilJs.appShareTrue("搭配购", "", shareUrl, shareDesc);
    }
  },
  activated() {
    setDocumentTitle("搭配购");// eslint-disable-line
    let prodIdTmp = this.$route.query.prodId || 0;
    let prodTypeTmp = this.$route.query.prodType || 0;
    if (utilJs.checkNeedInitData(this.collocationList, this.page) || (prodIdTmp != this.prodId) || (prodTypeTmp != this.prodType)) {
      this.prodId = this.$route.query.prodId || 0;
      this.prodType = this.$route.query.prodType || 0;
      this.collocationList = [];
      this.page = 1;
      this.is_page = false;
      this.isLoading = false;
      this.getList();
    }
    window.addEventListener('scroll', this.windowScrollFunction);
    this.wechatShare();
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>
<style scoped>
.time-bg {
  background: rgba(51, 51, 51, 0.1);
  line-height: 0.65rem;
}
.bd1-xmlred {
  border: 1px solid #FF300C;
}
.buy-bg {
  background-image: linear-gradient(90deg, #FF9367 0%, #FF300C 100%);
}
.maxw240 {
  max-width: 6rem;
}
.p-l-2 {
  left: -0.05rem;
}
</style>


